<template>
  <div class="mNav">
    <Father />
    <Extension />
  </div>
</template>

<script>
import Extension from "./extension/extension";
import Father from "./father/father";
let timer = null; // 清空数据的计时器
let timerSet = null; // 设置数据的计时器
export default {
  name: "mNav",
  data() {
    return {
      nav: null,
      extend: null,
      extendTitle: null,
      timer: null,
    };
  },
  components: {
    Father,
    Extension,
  },
  beforeMount() {
    const staticDebug = this.$store.state.staticDebug;
    // this.axios.get("http://127.0.0.1:7001/product/nav").then((response) => {
    //   console.log(response)
    // })
    this.nav = this.$store.state.nav;
  },
  mounted() {},
  methods: {
    clearTimer() {
      clearTimeout(timer);
      clearTimeout(timerSet);
      timerSet = null;
      timer = null;
    },
    setTimer() {
      // 延时关闭扩展栏
      if (timer !== null) {
        return false;
      }
      this.clearTimer();
      timer = setTimeout(() => {
        this.extend = null;
        this.extendTitle = null;
        this.clearTimer();
      }, 300);
    },
    setTimerSet(title, data) {
      // 延时更新扩展栏
      if (timerSet !== null) {
        return false;
      }
      this.clearTimer();
      timerSet = setTimeout(() => {
        this.true = false;
        this.extend = data;
        this.extendTitle = title;
      }, 150);
    },
    hoverHandle(title, data) {
      if (this.extend !== null) {
        // 扩展栏已展开，防止鼠标快速滑过意外修改扩展栏
        this.setTimerSet(title, data);
        return true;
      }
      this.clearTimer();
      this.extend = data;
      this.extendTitle = title;
    }, // hoverHandle
    leaveHandle() {
      this.setTimer();
    },
    filterHandle() {
      this.extend = null;
      this.extendTitle = null;
    },
  }, // methods
};
</script>

<style lang="scss" scoped>
.mNav {
  height: 100vh;
  width: 270px;
  font-family: DianHei-5;
  float: left;
  display: block;
  overflow: hidden;
}
</style>>
